/* eslint-disable */
import { Chart, Tooltip, Axis, Bar, SmoothLine, Point, Legend, Line } from 'viser-react';
import * as React from 'react';

const data = [
  { time: '10:10', call: 4, waiting: 2, people: 2 },
  { time: '10:15', call: 2, waiting: 6, people: 3 },
  { time: '10:20', call: 13, waiting: 2, people: 5 },
  { time: '10:25', call: 9, waiting: 9, people: 1 },
  { time: '10:30', call: 5, waiting: 2, people: 3 },
  { time: '10:35', call: 8, waiting: 2, people: 1 },
  { time: '10:40', call: 13, waiting: 1, people: 2 }
];

const scale = [{
  dataKey: 'call',
  min: 0
}, {
  dataKey: 'people',
  min: 0
}, {
  dataKey: 'waiting',
  min: 0
}];


export default class Groups extends React.Component {
  render() {
    return (
      <Chart data={data} forceFit height={400} scale={scale}>
        <Tooltip />
        <Legend
          allowAllCanceled
          custom
          items={[
            { value: 'waiting', marker: { symbol: 'square', fill: '#3182bd', radius: 5 } },
            { value: 'people', marker: { symbol: 'hyphen', stroke: '#fd0000', radius: 5, lineWidth: 3 } },
            { value: 'call', marker: { symbol: 'hyphen', stroke: '#0000ff', radius: 5, lineWidth: 3 } }
          ]}
          onClick={(ev, chart) => {
            const item = ev.item;
            const value = item.value;
            const checked = ev.checked;
            const geoms = chart.getAllGeoms();
            for (let i = 0; i < geoms.length; i++) {
              const geom = geoms[i];
              if (geom.getYScale().field === value) {
                if (checked) {
                  geom.show();
                } else {
                  geom.hide();
                }
              }
            }
          }
          }
        />
        <Axis
          grid={null}
          label={{
            textStyle: {
              fill: '#fd0000'
            }
          }}
        />
        <Bar position="time*waiting" color="#3182bd" />
        <SmoothLine position="time*people" color="#fd0000" size={3} />
        <Point shape="circle" position="time*people" color="#fd0000" size={3} />
        <Line shape="circle" position="time*call" color="#0000ff" size={3} />
      </Chart>
    );
  }
}

